<template>
  <div class="app-container">
    <!-- 订单资料建档页面 -->
    <div v-show="!showSecondPage">
      <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />

      <el-card class="mt10" shadow="never" :body-style="{ padding: '10px' }">
        <!-- 表格 -->
        <h1 class="f16 mb9">订单资料</h1>
        <Table
          :tableData="tableData"
          :tableHeader="tableHeader"
          selection
          :outTableHeight="105"
          @sortChange="sortChange"
          :isLoading="isLoading"
          @confirmChange="confirmChange"
          @selectList="selectedList"
          @currentRow="currentRow"
        />
        <!-- 底部 -->
        <p class="mt10">PS:指令号标记是绿色的，才可以修改订单资料(是同组别下的业务员导入的订单)</p>
        <PageModule :PageData="{ total }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" class="mt0" />
      </el-card>
    </div>

    <!-- 鞋图维护页面 -->
    <div v-show="showSecondPage">
      <Find :OriginalFilter="{ static: true }" :formList="formList2" @findClicked="findClicked2" />
      <el-card class="mt10" shadow="never" :body-style="{ padding: '10px' }">
        <Table
          @handlePasteJ="handlePasteJ"
          :tableData="tableData2"
          :tableHeader="tableHeader2"
          :isLoading="isLoading2"
          :outTableHeight="40"
          @confirmChange="confirmChange2"
          :getTableList="getTableList2"
        />
        <p class="mt10">PS:检核状态标记是绿色的，才可以修改</p>
        <!-- 分页器 -->
        <PageModule :PageData="{ total: total2 }" @pageSizeChange="handleSizeChange2" @pageChange="handleCurrentChange2" class="mt0" />
      </el-card>
    </div>

    <!-- 打印标签 -->
    <div v-show="false" id="report" style="flex-wrap: wrap">
      <div v-for="item in printArr" :key="item.lotNo" style="width: 220px; margin-top: 10px">
        <p style="text-align: center; margin: 0">货号：{{ item.facStyle }}</p>
        <p style="text-align: center; margin: 0">颜色：{{ item.color }}</p>
        <div style="display: flex; justify-content: center">
          <img :src="item.img" alt="" />
        </div>
        <p style="text-align: center; margin: 0">{{ item.lotNo }}</p>
      </div>
    </div>

    <!-- 鞋图批量上传 -->
    <el-dialog v-model="uploadListDialog" width="80%">
      <el-upload
        :auto-upload="false"
        multiple
        v-model:file-list="fileList"
        action="#"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
      <el-button type="primary" size="default" @click="confirmUpload">确认上传</el-button>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { selectList } from '@/plugins/mixin'
import service from '@/utils/request'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash'
import Api from '@/api/GeneralManager/inquire/Acquisitionnode'
import { defineComponent, onMounted, ref, watch } from 'vue'
import LoginWork from '@/utils/LoginWork'
import fileRequest from '@/utils/fileRequest'
import qrcode from 'qrcode'
import '@/assets/font/SmileySans-Oblique-normal.js'
import { Plus } from '@element-plus/icons-vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'OrderDataFile'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const showSecondPage = ref(false)
const uploadListDialog = ref(false)
const fileList = ref<any[]>([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const drawer = ref(false)
const handlePictureCardPreview: any['onPreview'] = (uploadFile: any) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}

const confirmUpload = async () => {
  let formData = new FormData()
  console.log(fileList.value)
  fileList.value.forEach((item: any) => {
    formData.append('list', item.raw) // 添加文件对象及文件名
  })
  const res = (await fileRequest.post('/pcOrder/importMorePhotos', formData)) as any
  res.data
    .text()
    .then(function (text: any) {
      // 将文本转换为JSON对象
      var jsonData = JSON.parse(text)
      if (jsonData.code == 200) {
        JMessage.success('上传成功')
        fileList.value = []
        uploadListDialog.value = false
        getTableList()
      } else {
        JMessage.error(jsonData.message)
      }
    })
    .catch(function (error: any) {
      console.error('Error reading Blob as text:', error)
    })
}
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入货号',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '',
    selectP: '品牌',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '',
    selectP: '季节',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '',
    selectP: '样品类型',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '下单日期',
    dateValue: ''
  },
  {
    type: 'date',
    dateLabel: '客人日期',
    dateValue: ''
  },

  {
    type: 'checkbox',
    checkboxLabel: '已结案',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '未结案',
    checked: true
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '标签打印'
  },
  {
    type: 'button',
    checkboxLabel: '订单结案'
  },
  {
    type: 'button',
    checkboxLabel: '鞋图维护'
  },
  {
    type: 'button',
    checkboxLabel: '订单恢复'
  },
  {
    type: 'button',
    checkboxLabel: '订单导入'
  },
  {
    type: 'button',
    checkboxLabel: '样品单导出'
  },
  {
    type: 'button',
    checkboxLabel: '多Sheet导出'
  },
  {
    type: 'button',
    checkboxLabel: '鞋图批量上传'
  },
  {
    type: 'button',
    checkboxLabel: '打勾删除',
    bgColor: '#FF4949'
  }
  // {
  //   type: 'button',
  //   checkboxLabel: '生成订单号',
  //   bgColor: '#C0E080'
  // }
])
const imgList = ref([])
const tableHeader = ref([
  {
    cfmFlag: '#c0e080',
    label: '指令号',
    prop: 'lotNo',
    width: 150
  },
  {
    label: '品牌',
    prop: 'brand'
  },
  {
    label: '工厂货号',
    prop: 'facStyle'
  },
  {
    label: '客人货号',
    prop: 'custStyle'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '号码',
    prop: 'sizeNo'
  },
  {
    label: '数量(单击)',
    sortable: 'custom',
    prop: 'orderQty'
  },
  {
    label: '样品类型',
    prop: 'sampleType'
  },
  {
    label: '季节',
    prop: 'seasonType'
  },
  {
    label: '纸板号',
    prop: 'facStyle'
  },
  {
    label: '面衬',
    prop: 'sockNo'
  },
  {
    label: '楦头',
    prop: 'lastNo'
  },
  {
    label: '大底',
    prop: 'moldNo'
  },
  {
    label: '下单日期',
    prop: 'orderDate'
  },
  {
    label: '客户交期',
    prop: 'deliveryDate'
  },
  {
    label: '备注',
    prop: 'remark'
  },
  {
    label: '制单员',
    prop: 'sysUser'
  },
  {
    label: '制单日期',
    prop: 'sysDate'
  },
  {
    type: 'img',
    label: '图片',
    fixed: true,
    prop: 'photoPath',
    srcList: imgList
  }
])
// 表一模块
const printArr = ref() as any
// '置空'按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '鞋图维护') {
    showSecondPage.value = true
    ;(
      formList2.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入工厂货号'
      ) as any
    ).inputValue = currentTableRow.value.facStyle
    ;(
      formList2.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令号'
      ) as any
    ).inputValue = currentTableRow.value.lotNo
  }
  if (content === '订单结案') {
    if (selectedFacList.value.length === 0) {
      JMessage.warning('请选择需要结案的数据')
      return
    }
    let res = await LoginWork.put<any, any>('/pcOrder/updatePcOrderDataSac', {
      cfmFlag: '1',
      list: selectedFacList.value
    })
    JMessage.success(res.message)
  }
  if (content === '订单恢复') {
    let res = await LoginWork.put<any, any>('/pcOrder/updatePcOrderDataSac', {
      cfmFlag: '2',
      list: selectedFacList.value
    })
    JMessage.success(res.message)
  }
  if (content === '订单导入') {
    upload(1)
  }
  if (content === '样品单导出') {
    const res = (await fileRequest.post(`/pcOrder/downloadPcOrderDate`, currentTableRow.value)) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    link.download = `${currentTableRow.value.lotNo} ${Date.now()}.xls` //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
  if (content === '多Sheet导出') {
    if (selectedFacList.value.length === 0) {
      JMessage.warning('请勾选需要导出的数据')
      return
    }
    const res = (await fileRequest.post(`/pcOrder/downloadPcOrderList?rowids=${selectedFacList.value}`)) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    link.download = `多样品单导出.xls` //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
  if (content === '鞋图批量上传') {
    uploadListDialog.value = true
  }

  if (content === '标签打印') {
    printPdf()
  }
  if (content === '打勾删除') {
    if (selectedFacList.value.length === 0) {
      JMessage.warning('请选择需要删除的数据')
      return
    }
    let res = await LoginWork.post<any, any>(
      '/pcOrder/deletePcOrderHead',
      selectedLists.value.map((item: any) => item.lotNo)
    )
    if (res.code === 200) {
      JMessage.success(res.message)
    } else {
      JMessage.error(res.message)
    }
  }
  getTableList()
}

const printPdf = () => {
  console.log(printArr.value, selectedLists.value)
  const printWindow = window.open('', '_blank')
  const qrCodeContainer = document.querySelector('#report') as any
  qrCodeContainer.style.display = 'flex'
  printWindow!.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>标签打印</title>
          <link rel="stylesheet" type="text/css" href="print.css" media="print">
          <style>
            body, html {
              margin: 0;
              padding: 0;
            }
            @page {
              size: auto;
              margin: 3mm;
            }
            @media print {
            }
            h2 {
              margin-left: initial; /* 或者设置适合打印的左边距 */
              page-break-inside: avoid; /* 避免在h2元素内部分页 */
            }
            .title {
                display: flex;
                justify-content: center;
                font-size: 6px;
            }
            .center {
                text-align: center;
            }

            .right {
                text-align: right;
            }

            .left {
                text-align: left;
            }

            .no-padding {
                padding: 0;
            }

            .no-margin {
                margin: 0;
            }

            .margin-5 {
                margin: 5px;
            }

            .margin-top-5 {
                margin-top: 5px;
            }

            .margin-top-15 {
                margin-top: 15px;
            }

            .size-8 {
                font-size: 8px !important;
            }

            .size-10 {
                font-size: 10px;
            }

            .size-12 {
                font-size: 12px;
            }

            .size-14 {
                font-size: 14px;
            }

            .size-16 {
                font-size: 16px;
            }

            .size-18 {
                font-size: 18px;
            }

            .size-24 {
                font-size: 24px;
            }

            #date-tip {
                position: relative;
            }

            span.tip {
                display: inline-block;
                height: 14px;
                line-height: 14px;
                margin-right: 30px;
            }

            table {
                font-size: 10px;
                border-collapse: collapse;
                border-spacing: 0;
                border-collapse: collapse;
                border-spacing: 0;
                empty-cells: show;
                width: 100%;
            }

            table th,
            table td {
                border: 1px solid #000;
                font-size: 12px;
            }

            table.no-border,
            table.no-border th,
            table.no-border td {
                border: 0px;
            }

            table td.no-left-border {
                border-left: 0px;
            }

            table td.no-right-border {
                border-right: 0px;
            }

            .img_out {
                width: 70px;
                height: 70px;
                max-height: 70px;
                object-fit: contain;
                overflow: hidden;
            }

            .img_code {
                width: 60px;
                height: 60px;
                max-width: 60px;
                max-height: 60px;
                object-fit: contain;
            }

            .width50 {
                width: 70px;
                max-width: 70px;
            }

            .width30 {
                width: 40px;
                max-width: 40px;
            }

            .width45 {
                width: 35px;
                max-width: 35px;
            }

            .width80 {
                width: 70px;
                max-width: 70px;
            }

            .widthSize {
                width: 20px;
                min-width: 20px;
                max-width: 20px;

            }
          </style>
        </head>
        <body>
    `)

  const cloneContainer = qrCodeContainer.cloneNode(true)
  printWindow!.document.body.appendChild(cloneContainer)

  printWindow!.document.write(`
        </body>
      </html>
    `)
  printWindow!.document.close()
  // 开始打印
  // printWindow!.print()
  qrCodeContainer.style.display = 'none'
}
const upload = async (type: number = 1) => {
  const fileType = ['xls', 'xlsx']
  const inputFile = document.createElement('input')
  const maxFileSizeMb = 2
  inputFile.type = 'file'
  inputFile.style.display = 'none'
  document.body.appendChild(inputFile)
  inputFile.addEventListener('change', async function () {
    const files = inputFile.files as any // 获取文件数组
    const file = files[0] // 获取第一个文件对象
    const fileExtension = file.name.split('.').pop()
    if (!fileType.includes(fileExtension as any)) {
      JMessage.warning('上传的文件格式只能是 xls, xlsx')
      document.body.removeChild(inputFile)
      return false
    }
    const formData = new FormData() as any
    formData.append('file', file) // 添加文件对象及文件名
    let result = {} as any
    if (type === 1) {
      result = (await LoginWork.post('/pcOrder/uploadPcOrderHeadTemp', formData)) as any
    } else if (type === 2) {
      result = (await LoginWork.post('/pcOrder/uploadPcBatchOrder', formData)) as any
    }
    if (result.code === 200) {
      JMessage.success(result.message)
      getTableList()
    } else {
      JMessage.error(result.message)
    }
  })
  inputFile.click()
}
const tableData = ref([])
const isLoading = ref(true)

// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)

const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 表格计算函数
const cfmFlag = () => {
  const Unaudited = formList.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '已结案')
  const Audited = formList.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '未结案')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return ''
  } else if (Unaudited.checked) {
    return '1'
  } else if (Audited.checked) {
    return '2'
  } else {
    ElMessage('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return ''
  }
}
const order = ref('')
// 获取表数据
const getTableList = debounce(async () => {
  let id = Math.floor(Math.random() * 10000000).toString()
  isLoading.value = true
  let tableDataList = await service.post<any, any>('/pcOrder/getPcOrderData', {
    brand: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '品牌')
      ?.selectValue,
    check: cfmFlag(),
    custStyle: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入货号'
    )?.inputValue,
    deliveryEndTime: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '客人日期'
    )?.dateValue?.[1],
    deliveryStartTime: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '客人日期'
    )?.dateValue?.[0],
    lotNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令'
    )?.inputValue,
    order: order.value,
    orderEndTime: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '下单日期'
    )?.dateValue?.[1],
    orderStartTime: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '下单日期'
    )?.dateValue?.[0],
    sampleType: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '样品类型')
      ?.selectValue,
    season: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '季节')
      ?.selectValue,
    pageNum: currentPage.value,
    pageSize: pageSize.value
  })
  isLoading.value = false
  imgList.value = tableDataList.list.map((item: any) => {
    return item.photoPath
  })
  tableData.value = tableDataList.list
  total.value = tableDataList.total

  currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
// 排序
const sortChange = (sort: string) => {
  if (sort === 'ascending') {
    console.log('升序')
    order.value = '1'
  } else if (sort === 'descending') {
    console.log('降序')
    order.value = '2'
  } else {
    console.log('取消排序')
    order.value = ''
  }
  getTableList()
}
// 修改后点击确定按钮
const confirmChange = async (row: any) => {
  await service.put('/pcOrder/updatePcOrderData', { list: [row] })
}
// 勾选
const selectedLists = ref([]) as any
const selectedFacList = ref([]) as any
const selectedList = (selected: any) => {
  selectedLists.value = selected
  printArr.value = selectedLists.value.map((item: any) => {
    let qrCodeData = item.lotNo
    qrcode.toDataURL(qrCodeData, (err: any, url: any) => {
      if (err) {
        JMessage.error(err)
      } else {
        qrCodeData = url
      }
    })
    return {
      img: qrCodeData,
      lotNo: item.lotNo,
      facStyle: item.facStyle,
      color: item.color
    }
  })
  selectedFacList.value = selected.map((item: any) => {
    return item.lotNo
  })
}

// 鞋图维护页面
const formList2 = ref([
  {
    type: 'checkbox',
    checkboxLabel: '已检核',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '未检核',
    checked: true
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入工厂货号',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '',
    selectP: '样品类型',
    selectOptions: []
  },

  {
    type: 'date',
    dateLabel: '下单日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '返回'
  }
])
// 点击某一行
const currentTableRow = ref({}) as any
const currentRow = (row: any = tableData.value[0]) => {
  currentTableRow.value = row
}

const imgList2 = ref([])
const tableHeader2 = ref([
  {
    label: '检核状态',
    prop: 'cfmFlag'
  },
  {
    label: '工厂货号',
    prop: 'style'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '样品类型',
    prop: 'sampleType'
  },
  {
    label: '楦头',
    prop: 'lastNo'
  },
  {
    label: '大底',
    prop: 'moldNo'
  },
  {
    change: '#c0e080',
    label: '指令',
    prop: 'lotNo',
    width: 150
  },
  {
    Multistage: true,
    label: '剪裁工艺(本厂)',
    children: [
      {
        type: 'checkbox',
        label: '电雕',
        prop: 'embroidFlag',
        width: 70
      },
      {
        type: 'checkbox',
        label: '印刷/胶印',
        prop: 'printFlag',
        width: 70
      },
      {
        type: 'checkbox',
        label: '无缝',
        prop: 'sewFlag',
        width: 70
      },
      {
        type: 'checkbox',
        label: '高频/热切',
        prop: 'hfFlag',
        width: 70
      }
    ]
  },
  {
    Multistage: true,
    label: '剪裁工艺(外发)',
    children: [
      {
        type: 'checkbox',
        label: '外发胶印',
        prop: 'outJy',
        width: 70
      },
      {
        type: 'checkbox',
        label: '分化',
        prop: 'outFh',
        width: 70
      },
      {
        type: 'checkbox',
        label: '电绣',
        prop: 'outDx',
        width: 70
      },
      {
        type: 'checkbox',
        label: '外发热切',
        prop: 'outRq',
        width: 70
      }
    ]
  },
  {
    type: 'img',
    label: '图片',
    fixed: true,
    prop: 'photoPath',
    srcList: imgList2
  },
  {
    type: 'upload',
    label: '上传图片',
    imgAction: '/kl/pcOrder/shoe/updateShoePhoto'
  },
  {
    type: 'paste',
    label: '粘贴图片',
    prop: 'pastePhoto'
  }
])
const handlePasteJ = async (row: any, e: any) => {
  const formData = new FormData() as any
  let file = null
  file = e.clipboardData.items[0].getAsFile()
  // 创建File对象
  formData.append('file', file)
  const res = (await LoginWork.post(`/pcOrder/shoe/updateShoePhoto?style=${row.style}&color=${row.color}`, formData)) as any
  console.log(res)

  if (res.code === 200) {
    JMessage.success('上传成功')
    getTableList2()
    return
  } else {
    JMessage.error(res.message)
  }
}
const tableData2 = ref([])
// 表一模块
// '置空'按钮
const findClicked2 = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
    getTableList2()
  }
  if (content === '返回') {
    showSecondPage.value = false
    formList2.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
    getTableList()
  }
}
const isLoading2 = ref(true)
// 分页器
const currentPage2 = ref(1)
const pageSize2 = ref(40)
const total2 = ref(0)
const handleSizeChange2 = (val: number) => {
  pageSize2.value = val
  getTableList2()
}
const handleCurrentChange2 = (val: number) => {
  currentPage2.value = val
  getTableList2()
}
// 表格计算函数
const cfmFlag2 = () => {
  const Unaudited = formList2.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '已检核')
  const Audited = formList2.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '未检核')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return ''
  } else if (Unaudited.checked) {
    return '1'
  } else if (Audited.checked) {
    return '2'
  } else {
    ElMessage('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return ''
  }
}
// 获取表数据
const getTableList2 = debounce(async () => {
  isLoading2.value = true
  let tableDataList = await service.post<any, any>('/pcOrder/shoe/getPcOrderShoePhotoFix', {
    check: cfmFlag2(),
    facStyle: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入工厂货号'
    )?.inputValue,
    lotNo: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令号'
    )?.inputValue,
    orderEndTime: formList2.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '下单日期'
    )?.dateValue?.[1],
    orderStartTime: formList2.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '下单日期'
    )?.dateValue?.[0],
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    sampleType: formList2.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '样品类型')
      ?.selectValue
  })
  isLoading2.value = false
  imgList2.value = tableDataList.list.map((item: any) => {
    return item.photoPath
  })
  let tableData = tableDataList.list.map((item: any) => {
    item.embroidFlag === 'Y' ? (item.embroidFlag = true) : (item.embroidFlag = false)
    item.printFlag === 'Y' ? (item.printFlag = true) : (item.printFlag = false)
    item.sewFlag === 'Y' ? (item.sewFlag = true) : (item.sewFlag = false)
    item.hfFlag === 'Y' ? (item.hfFlag = true) : (item.hfFlag = false)
    item.outJy === 'Y' ? (item.outJy = true) : (item.outJy = false)
    item.outFh === 'Y' ? (item.outFh = true) : (item.outFh = false)
    item.outDx === 'Y' ? (item.outDx = true) : (item.outDx = false)
    item.outRq === 'Y' ? (item.outRq = true) : (item.outRq = false)
    return item
  })
  tableData2.value = tableData
  total2.value = tableDataList.total
}, 500)

watch(
  formList2.value,
  debounce(() => {
    getTableList2()
  }, 500)
)

const confirmChange2 = async (row: any) => {
  await service.put('/pcOrder/shoe/upDateShoeDetail', row)
}

// 下拉框请求数据
const getSelectList = async () => {
  await selectList(formList, Api.getSelectList)
}
onMounted(async () => {
  getSelectList()
  await selectList(formList2, Api.getSelectList)
})
</script>
<style media="print">
.List {
  font-size: 13px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.left {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.right {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: start;
}

img {
  width: 80px;
  height: 80px;
}
</style>
<style type="text/css" media="print">
@media print {
  html,
  body {
    margin: 0;
    padding: 0;
    width: 60mm;
    height: 40mm;
  }

  @page {
    margin: 1mm;
    margin-top: 4mm;
    size: landscape;
  }
}
</style>
<style lang="less" scoped>
p {
  color: #ff2020;
  font-size: 12px;
}
</style>
